<template>
  <div class="open-vip">
    <h3>开通VIP</h3>
    <dl class="qrcode">
      <dt><el-radio v-model="payType" label="0" @change="callback">在线支付</el-radio></dt>
      <dd class="qrcode-img" :class="payType === '1'?'mask':''">
        <qrcode :value="wxPayInfo.code_url" :options="{ size: 150 }"></qrcode>
      </dd>
      <dd class="text">
        <em>￥{{wxPayInfo.payAmount?wxPayInfo.payAmount:0}}</em>
        <p>请用微信扫码支付</p>
        <span><i class="icon icon-wxPay"></i>微信支付</span>
      </dd>
    </dl>
    <form @submit.prevent="bindCard('card')" data-vv-scope="card">
      <dl class="card">
        <dt><el-radio v-model="payType" label="1" @change="clearCallback">会员卡激活</el-radio></dt>
        <dd>
          <ul>
            <li>
              <span>卡号</span>
              <el-input clearable :disabled="payType === '0'" placeholder="请输入VIP卡号" name="cardNumber" data-vv-as="VIP卡号" v-model="bindParams.cardNumber" v-validate="'required'"></el-input>
              <div class="tip" v-show="errors.has('card.cardNumber')"> {{ errors.first('card.cardNumber') }} </div>
            </li>
            <li>
              <span>密码</span>
              <el-input clearable :disabled="payType === '0'" placeholder="请输入VIP密码" name="cardpwd" data-vv-as="VIP密码" v-model="bindParams.password" v-validate="'required'"></el-input>
              <div class="tip" v-show="errors.has('card.cardpwd')">{{ errors.first('card.cardpwd') }}</div>
            </li>
          </ul>
          <button :disabled="payType === '0'" type="submit">立即激活</button>
        </dd>
      </dl>
    </form>
  </div>
</template>
<script>
import { api } from '@/utils'
import { mapState, mapMutations, mapActions } from 'vuex'
var _time
export default {
  data () {
    return {
      wxPayInfo: '',
      payType: '0',
      bindParams: {
      }
    }
  },
  created () {
    // clearInterval(_time)
    // this.wxPay()
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo',
      authInfo: 'authInfo'
    })
  },
  methods: {
    ...mapMutations(['SET_AUTH_INFO']),
    ...mapActions(['getUserInfo']),
    init () {
      clearInterval(_time)
      this.wxPay()
    },
    wxPay () {
      this.$axios.post(api.wxWebPrePay, {}).then(data => {
        this.wxPayInfo = data
        this.callback()
      }).catch(data => {
        this.$message.error(data.data.message)
      })
    },
    clearCallback () {
      // 点击用卡激活则关闭重复请求接口
      clearInterval(_time)
    },
    callback () {
      // 二维码支付，需要实时调接口判断是否支付成功，成功后关闭弹窗并在首页刷新数据
      _time = setInterval(() => {
        this.$axios.get(api.wxPayQuery, {params: { out_trade_no: this.wxPayInfo.out_trade_no }}).then(data => {
          // 支付成功关闭
          if (data.trade_state === 'SUCCESS') {
            clearInterval(_time)
            // VIP成功提示
            this.$notify({
              title: '成功',
              message: 'VIP激活成功',
              type: 'success'
            })
            // 激活成功关闭弹窗
            this.$emit('event', false)
          }
        }).catch(data => {
          this.$message.error('网络请求失败，请重试')
          clearInterval(_time)
        })
      }, 1000)
    },
    bindCard (scope) {
      this.$validator.validateAll(scope).then((result) => {
        if (result) {
          let authInfo = this.authInfo
          this.$axios.post(api.bindingCard, {
            ...this.bindParams,
            phoneNumber: authInfo.phoneNum
          }).then(data => {
            let authInfo = this.lodash.cloneDeep(this.authInfo)
            authInfo.isValid = true
            authInfo.level = data.level
            this.SET_AUTH_INFO(authInfo)
            this.getUserInfo(this)
            // VIP成功提示
            this.$notify({
              title: '成功',
              message: 'VIP激活成功',
              type: 'success'
            })
            // 激活成功关闭弹窗
            this.$emit('event', false)
          }).catch(err => {
            this.$message.error(err.data.message)
          })
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
  .open-vip{
    width: 700px;
    background: $light;
    padding: 30px 20px 0;
    border-radius: 10px;
    display:flex;
    flex-direction: column;
    h3{
      font-size: 20px;
      line-height: 28px;
      color:#1D1E2C;
      text-align:center;
    }
    .qrcode,.card{
      display: flex;
      align-items: center;
      >dt{
        width: 230px; padding-left: 40px;
        color:#444;
        font-size: 18px;
      }
    }
    .qrcode{
      height: 230px;
      border-bottom:1px solid $line;
      .qrcode-img{
        position: relative;
        display: flex; align-items:center;
        justify-content: center;
        width: 170px; height: 170px;
        border:1px solid $line;
        &.mask{
          filter: blur(5px);
        }
      }
      .text{
        padding-left:20px;
        em{
          display:block;
          font-size: 32px;
          color:#1AAD19;
          line-height: 45px; height:45px;
          margin-bottom: 12px;
        }
        p{
          font-size:13px; line-height: 18px;
          color:$stable-ad;
          padding-left:10px;
          margin-bottom:2px;
        }
        >span{
          padding-left:10px;
          height:20px; line-height:20px;
          display: flex;
          align-items: center;
          font-size:10px; color:#231815;
          i{
            color:#1AAD19;
            margin-right:10px;
          }
        }
      }
    }
    .card{
      position:relative;
      height: 250px;
      >dd{
        flex:1;
        display:flex;
        flex-direction: column;
        >ul li{
          margin-bottom: 20px;
          font-size: 18px;
          color:#69707F;
          display:flex;
          align-items:center;
          >span{
            width:60px;
          }
          >.tip{
            padding-left:10px;
            color:$table-r;
          }
        }
        >button{
          border:none;
          padding:0px;
          background:$positive;
          color:$light;
          border-radius:10px;
          width:260px; height:50px;
          text-align:center; line-height:50px;
          cursor:pointer;
        }
      }
    }

    /deep/ {
      .el-input{
        width: auto;
      }
      .el-input__inner{
        border-radius: 10px !important;
        padding:0 10px !important;
        background:transparent;
        border:1px solid $line !important;
        width:195px;
      }
      .el-radio__inner{
        width:20px; height:20px;
        border-color:$line;
        background:transparent;
        &:after{
          width:20px; height:20px;
          content:"✔";
          text-align:center;
          line-height:20px;
          color:$light;
          background:#06D6A0;
        }
      }
      .el-radio{
        display: flex;
        align-items: center;
      }
      .el-radio__label{
        color:#444;
        font-size: 18px;
      }
    }
  }
</style>
